<template>
  <div class="block">
    <div style="margin-top: 10px; margin-left: 10px">
      <label class="label-text">站场名称</label>
      <el-select
        v-model="alarmInfo.station"
        placeholder="请选择"
        clearable
        style="width: 200px"
        class="filter-item"
      >
        <el-option
          v-for="item in stationNameOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <label class="label-text">机车号</label>
      <el-input
        v-model.trim="alarmInfo.trainNo"
        placeholder="请输入"
        style="width: 200px"
        class="filter-item"
      />

      <label class="label-text">报警时间</label>
      <el-date-picker
        v-model="alarmInfo.startTime"
        type="datetime"
        placeholder="选择日期时间"
      >
      </el-date-picker>

      <label class="label-text">结束时间</label>
      <el-date-picker
        v-model="alarmInfo.endTime"
        type="datetime"
        placeholder="选择日期时间"
      >
      </el-date-picker>

      <el-button @click="reset"> 重置 </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
        查询
      </el-button>
    </div>

    <div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="rcvTableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
        ref="refsTable"
      >
        <el-table-column label="站场名称" width="250" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.stationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="机车号" width="220" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.trainNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报警时间" align="center" width="300">
          <template slot-scope="{ row }">
            <span>{{ row.happenTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" width="300" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.fixTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报警内容" width="300" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.alarmContent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="级别" align="center" width="200">
          <template slot-scope="{ row }">
            <span>{{ row.alarmLevel }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :page-sizes="[10, 50, 100, 200, 500]"
        :total="totalDataLength"
        :current-page="currentPage"
        align="center"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import script from "./script";
export default script;
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
